.search {
  padding: 20rpx;

  .header {
    display: flex;
    align-items: center;

    text {
      flex-shrink: 0;
      color: #666666;
      font-size: 50rpx;
    }

    input {
      flex: auto;
    }

    button {
      flex-shrink: 0;
      width: 120rpx;
      margin: 0;
      padding: 8rpx;
      color: #595959;
      font-size: 30rpx;
      font-weight: 500;
    }
  }

  .results {
    .content {
      height: 80rpx;
      line-height: 80rpx;
      border-bottom: 1rpx solid var(--themeColor);
      color: var(--themeColor);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .reslist {
      .resitem {
        display: flex;
        align-items: center;

        .icon-search {
          color: #666666;
          font-size: 50rpx;
        }

        .itemname {
          margin-left: 20rpx;
        }
      }
    }
  }

  .history {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    margin-top: 20rpx;

    .his-item {
      flex-shrink: 0;
      width: 18%;
      height: 50rpx;
      line-height: 50rpx;
      margin-left: 15rpx;
      margin-top: 10rpx;
      border-radius: 20rpx;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      background: #eeeeee;

      /*表示第1，6，11个元素不需要左间距*/
      &:nth-child(5n+1) {
        margin-left: 0;
      }

      /*表示前5个元素不需要上间距*/
      &:nth-child(-n+5) {
        margin-top: 0;
      }

      &.title {
        width: 10%;
        text-align: left;
        font-size: 30rpx;
        background: none;
      }

      &.icon-shanchu {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 28rpx;
        background: none;
      }
    }
  }

  .hotlist {

    .title {
      height: 80rpx;
      line-height: 80rpx;
      border-bottom: 1rpx solid #eeeeee;
      font-size: 32rpx;
    }

    .words {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

      .word-wrap {
        position: relative;
        flex-shrink: 0;
        width: 50%;
        height: 80rpx;

        .word {
          height: 80rpx;
          line-height: 80rpx;
          color: #223355;
          font-size: 28rpx;

          &.bold {
            font-weight: 600;
          }
        }

        image {
          width: 30rpx;
          height: 25rpx !important;
          margin-left: 10rpx;
          vertical-align: middle;
        }
      }
    }
  }
}
